<template>
  <div class="page">
    <!-- <div class="title-wrap">
      <h3 class="sub-title success-color">
        统计一段文本中每个词重复出现的次数
      </h3>
    </div> -->

    <div class="cont">
      <div class="input-box">
        <div class="input-wrap input-wrap2" id="inputAreaWrap">
          <el-input
            v-model="inputValue"
            type="textarea"
            placeholder="请粘贴要统计的码"
            :rows="10"
            autofocus
            resize="none"
          />
        </div>
      </div>
      <!-- <div class="tip">
        <span class="underline tap" @click="jumpToRule">使用规则</span>
      </div> -->
      <div :class="['input-btn-group']">
        <div class="row" v-for="(row, rIndex) in inputBtnGroups1" :key="rIndex">
          <!-- <div class="label">{{ row.name }}：</div> -->
          <div class="btn-wrap">
            <div
              class="btn-item"
              v-for="(btn, btnIndex) in row.btns"
              :key="btnIndex"
              @click="addInputValue(btn)"
            >
              <el-button class="btn" plain type="primary">{{ btn }}</el-button>
            </div>
          </div>
        </div>
      </div>
      <!-- <div :class="['input-btn-group', inputBtnGroupVisible ? '' : 'height0']">
        <div class="row" v-for="(row, rIndex) in inputBtnGroups2" :key="rIndex">
          <div class="btn-wrap">
            <div
              class="btn-item"
              v-for="(btn, btnIndex) in row.btns"
              :key="btnIndex"
              @click="addInputValue(btn)"
            >
              <el-button  class="btn" plain type="primary">{{ btn }}</el-button>
            </div>
          </div>
        </div>
      </div> -->

      <el-divider class="divider" content-position="center">
        <el-button type="primary" link @click="toggleInputBtnGroup"
          >{{ inputBtnGroupVisible ? '收起' : '展开' }}输入</el-button
        >
      </el-divider>
      <!-- <div class="split-char-wrap">
        <div class="label">单分隔符：</div>
        <div class="value" @touchmove.capture="stopPropagation" @mousewheel.capture="stopPropagation">
          <el-select
          v-model="splitChar"
          placeholder="请选择词与词的分隔符"
          clearable
        >
          <el-option
            v-for="item in splitCharOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        </div>
      </div> -->

      <div class="process-btn-group">
        <el-button class="btn marginleft2" size="large" type="primary" @click="startCountNumMa">统计号码</el-button>
        <el-button class="btn" size="large" type="warning" @click="clearInputValue">清空</el-button>
      </div>
      <div class="process-btn-group">
        <el-space wrap>
          <el-button class="btn" v-for="(proBtn,index) in processBtnGroups" :key="index" @click="countOtherMa(proBtn.value,proBtn.name)">{{ proBtn.name }}</el-button>
        </el-space>
        
      </div>
      <!-- /[\s,，;；、.。；;\n\-_\t\\\/\?？\+]+/ -->
    
      <div class="result-wrap" v-if="groupResult">
        <div class="title">
          结果如下:
          <el-button class="link-btn" type="primary" @click="downloadFile">下载txt</el-button>
          <el-button
            class="link-btn"
            type="primary"
            @click="downloadExcel"
            >下载表格</el-button
          >
          <el-button
            class="link-btn"
            type="primary"
            @click="copyResultText"
            >点击复制</el-button
          >
          <el-button
            class="link-btn"
            type="primary"
            @click="downloadExcelBySortNum"
            >下载表格(按数字排序)</el-button
          >
        </div>
        <!-- <div class="tools-wrap">
          <div class="label">排序方式：</div>
          <div class="value">
            <el-radio-group v-model="sortType" @change="sortResult">
              <el-radio :value="1">升序</el-radio>
              <el-radio :value="2">降序</el-radio>
            </el-radio-group>
          </div>
        </div> -->
        <div class="result-list-wrap">
          <div class="sub-title">统计结果：</div>
          <div
            class="result-item"
            v-for="(item, index) in groupResult"
            :key="index"
          >
            <div class="label">
              〖{{ item.num }}次〗（共{{ item.valueList.length }}个）
            </div>
            :
            <div class="res-value">{{ item.valueStr }}</div>
          </div>
        </div>
        <!-- <div class="title">详情如下:<span class="link-btn" @click="downloadFile">下载结果</span></div>
        <div class="result-list-wrap">
          <div class="result-item" v-for="(item,key) in result" :key="key">
            {{ key }}： <span class="res-value">{{ item }}（次）</span>
          </div>
        </div> -->
      </div>
    </div>
    <!-- 复制area -->
    <textarea id="copyTextArea" class="mf-area" ref="copyTextAreaRef" name="" cols="30" value="" rows="10"></textarea>
  </div>
</template>

<script>
import { splitCharOptions } from '@/utils/constant'
import { ElMessage } from 'element-plus'
import { downFile, getShortTodayStr, numToString } from '../utils/tools'
import { isReqOverflow } from '../utils/userLimit'
import * as XLSX from 'xlsx-js-style'
import { adminDialog } from '@/components/adminDialog'
import { maMap } from '@/data/49count'
import {ref} from 'vue'

let path = '/49count/'
let storageInputBtnGroupVisibleKey = path + 'inputBtnGroupVisible'
let storageInputBtnVisible = localStorage.getItem(storageInputBtnGroupVisibleKey)
let maKeys = Object.keys(maMap)
let numKeys = ['01','02','03','04','05','06','07','08','09','1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49']
// 最大数字位数
let maxNumLength = 2
export default {
  data() {
    return {
      sortType: 2,
      splitCharOptions: splitCharOptions,
      inputValue: '',
      splitChar: '',
      groupResult: null, //归类总结后的结果
      inputBtnGroupVisible: storageInputBtnVisible === 'true' ? true : false,
      num0Mas:[], // 出现0次的码
      inputBtnGroups1: [
        {
          name: '单双',
          btns: ['单', '双','大', '小']
        },
        {
          name: '波色',
          btns: [
            '红波',
            '绿波',
            '蓝波',
            '家畜',
            '野兽'
            // '红单',
            // '绿单',
            // '蓝单',
            // '红双',
            // '绿双',
            // '蓝双'
          ]
        },
        // {
        //   name: '大小',
        //   btns: ['大', '小']
        // },
        {
          name: '生肖',
          btns: [
            '鼠',
            '牛',
            '虎',
            '兔',
            '龙',
            '蛇',
          ]
        },
        {
          name: '生肖',
          btns: [
            '马',
            '羊',
            '猴',
            '鸡',
            '狗',
            '猪',
          ]
        },
        
        
        {
          name: '尾',
          btns: [
            '0尾',
            '1尾',
            '2尾',
            '3尾',
            '4尾',
            '5尾',
            '6尾',
            '7尾',
            '8尾',
            '9尾',
            // '0合尾',
            // '1合尾',
            // '2合尾',
            // '3合尾',
            // '4合尾',
            // '5合尾',
            // '6合尾',
            // '7合尾',
            // '8合尾',
            // '9合尾'
          ]
        },
      ],
      inputBtnGroups2: [
        {
          name: '五行',
          btns: ['金', '木', '水', '火', '土']
        },
        {
          name: '头',
          btns: [
            '0头',
            '1头',
            '2头',
            '3头',
            '4头',
            '0头单',
            '1头单',
            '2头单',
            '3头单',
            '4头单',
            '0头双',
            '1头双',
            '2头双',
            '3头双',
            '4头双'
          ]
        },
        {
          name: '门',
          btns: ['1门', '2门', '3门', '4门', '5门']
        },
        {
          name: '段',
          btns: ['1段', '2段', '3段', '4段', '5段', '6段', '7段']
        },
        {
          name: '合',
          btns: [
            '1合',
            '2合',
            '3合',
            '4合',
            '5合',
            '6合',
            '7合',
            '8合',
            '9合',
            '10合',
            '11合',
            '12合',
            '13合'
          ]
        },
        {
          name: '余',
          btns: [
            '3余0',
            '3余1',
            '3余2',
            '4余0',
            '4余1',
            '4余2',
            '4余3',
            '5余0',
            '5余1',
            '5余2',
            '5余3',
            '5余4',
            '6余0',
            '6余1',
            '6余2',
            '6余3',
            '6余4',
            '6余5',
            '7余0',
            '7余1',
            '7余2',
            '7余3',
            '7余4',
            '7余5',
            '7余6'
          ]
        },
        {
          name: '其他',
          btns: [
            '东段',
            '西段',
            '南段',
            '北段',
            '楼上码',
            '楼下码',
            '前落码',
            '后落码',
            '左边码',
            '右边码',
            '内围码',
            '外围码',
            '中数',
            '边数'
          ]
        }
      ],
      processBtnGroups: [
        {
          name: '肖统计',
          value: '鼠,牛,虎,兔,龙,蛇,马,羊,猴,鸡,狗,猪'
        },
        {
          name: '尾统计',
          value: '0尾,1尾,2尾,3尾,4尾,5尾,6尾,7尾,8尾,9尾'
        },
        // {
        //   name: '头统计',
        //   value: '0头,1头,2头,3头,4头'
        // },
        // {
        //   name: '行统计',
        //   value: '金,木,水,火,土'
        // },
        // {
        //   name: '合统计',
        //   value: '1合,2合,3合,4合,5合,6合,7合,8合,9合,10合,11合,12合,13合'
        // },
        // {
        //   name: '段统计',
        //   value: '1段,2段,3段,4段,5段,6段,7段'
        // },
        // {
        //   name: '合尾统计',
        //   value: '0合尾,1合尾,2合尾,3合尾,4合尾,5合尾,6合尾,7合尾,8合尾,9合尾'
        // },
        {
          name: '单双',
          value: '单,双'
        },
        {
          name: '大小',
          value: '大,小'
        },
        // {
        //   name: '合大小',
        //   value: '合大,合小'
        // },
        // {
        //   name: '合单双',
        //   value: '合单,合双'
        // },
        // {
        //   name: '尾大小',
        //   value: '尾大,尾小'
        // },
        // {
        //   name: '半单双',
        //   value: '小单,小双,大单,大双'
        // },
        {
          name: '家畜野兽',
          value: '家畜,野兽'
        },
        {
          name: '波色',
          value: '红波,绿波,蓝波'
        },
        // {
        //   name: '半波',
        //   value: '红单,红双,绿单,绿双,蓝单,蓝双'
        // },
        // {
        //   name: '前后码',
        //   value: '前落码,后落码'
        // },
        // {
        //   name: '内外码',
        //   value: '内围码,外围码'
        // },
        // {
        //   name: '上下码',
        //   value: '楼上码,楼下码'
        // },
        // {
        //   name: '左右码',
        //   value: '左边码,右边码'
        // },
        // {
        //   name: '东南西北',
        //   value: '东段,南段,西段,北段'
        // },
        // {
        //   name: '3余',
        //   value: '3余0,3余1,3余2'
        // },
        // {
        //   name: '4余',
        //   value: '4余0,4余1,4余2,4余3'
        // },
        // {
        //   name: '5余',
        //   value: '5余0,5余1,5余2,5余3,5余4'
        // },
        // {
        //   name: '6余',
        //   value: '6余0,6余1,6余2,6余3,6余4,6余5'
        // },
        // {
        //   name: '7余',
        //   value: '7余0,7余1,7余2,7余3,7余4,7余5,7余6'
        // },
        // {
        //   name: '门统计',
        //   value: '1门,2门,3门,4门,5门'
        // },
        // {
        //   name: '半头单双',
        //   value: '0头单,1头单,2头单,3头单,4头单,0头双,1头双,2头双,3头双,4头双'
        // }
      ]
    }
  },

  methods: {
    clearInputValue(){
      this.inputValue = ''
    },
    countOtherMa(target,name){
     
      let targetList = target.replace(/^,|,$/,'').split(',')
      // console.log('countOtherMa target:',target)
      
      let inputList = this.startSplit()
      console.log('inputList:',inputList)
      // 获取符合value的项
      
      let filterInputList = inputList.filter(input=>{
        if(targetList.includes(input)){
          return true
        }
      })
      let resObj = {}
      filterInputList.forEach((item) => {
        if (item) {
          if (resObj[item]) {
            resObj[item]++
          } else {
            resObj[item] = 1
          }
        }
      })
      let groupMaList = Object.keys(resObj)
      // console.log('groupNumMaList:',groupNumMaList)
      // 出现0次的数字码数组
      let nums0MaList = []
      targetList.forEach((item) => {
        if(!groupMaList.includes(item)){
          nums0MaList.push(item)
        }
      })
      let tempGroupResult = {}
      for (let key in resObj) {
        let num = resObj[key]
        if (tempGroupResult[num]) {
          tempGroupResult[num].push(key)
        } else {
          tempGroupResult[num] = [key]
        }
      }
      if(nums0MaList.length > 0){
        tempGroupResult[0]= nums0MaList
      }
      this.sortResult(tempGroupResult)
    },
    addInputValue(value) {
      if(this.inputValue.length === 0 || this.inputValue[this.inputValue.length - 1] === ','){
        this.inputValue += value + ','
      }else {
        this.inputValue += ',' + value + ','
      }
      
    },
    convertItemToString(valueList) {
      // console.log('convertItemToString valueList:',valueList)
      let hasComma = valueList.find((item) => String(item).includes(','))
      if (hasComma) {
        return valueList.join('、')
      } else {
        return valueList.join('，')
      }
    },

    stopPropagation(event) {
      event.stopPropagation()
      event.preventDefault()
      return false
    },

    maxNumInput(value) {
      // console.log('maxNumInput value:',value)
      // let tempLen = String(value).length
      // if(tempLen > maxNumLength){
      //   maxNumLength = tempLen
      // }
      maxNumLength = String(value).length
    },
    // 分割输入的字符串，得到数组
    startSplit() {
      // 超出免费限制
      if (isReqOverflow()) {
        adminDialog.show()
        return
      }
      if (!this.inputValue) {
        ElMessage.error('请输入要统计的码')
        return
      }
      let inputValue = this.inputValue.trim()

      let splitChar = this.splitChar
      let splitCharReg = null
      // console.log('splitChar:',splitChar)
      let resList = []
      // if(this.justRemoveBracket == '1'){
      //   inputValue = inputValue.replace(/[\(\)\[\]【】⟮⟯⟨⟩《》〖〗〔\〕\{\}『』〈〉﹝﹞]/g, ' ')
      // }
      // 删掉输入里的所有括号
      inputValue = inputValue.replace(/[\(\)\[\]【】⟮⟯⟨⟩《》〖〗〔\〕\{\}『』〈〉﹝﹞]/g, ',')
      // 如果分隔符不是换行符，就需要处理换行的情况
      // 如果有分隔符，就用分隔符，否则用空格分隔符
      let hasSplitChar = /[,，、\.。；;：:\-_\t\\\/\?？\+=!！\|＝=]/.test(inputValue)
      console.log('hasSplitChar:',hasSplitChar)
      if (splitChar !== '\\n') {
        let inputList = inputValue.split('\n')
        // 删除括号和网址
        inputList = inputList.map((item) => {
          // 删除网址
          item = item.replace(/(https?:\/\/[^\s]+)/g, '').replace(/(www\.[^\s]+)/g, '')
          return item
        })
        

        if (splitChar === '') {
          if(hasSplitChar){
            splitCharReg = /[\s,，、\.。；;：:\n\-_\t\\\/\?？\+=!！\|＝=]+/
          }else {
            splitCharReg = ''
          }
          
        } else if (splitChar === '无') {
          splitCharReg = ''
        } else {
          splitCharReg = new RegExp('[' + splitChar + ']+')
        }
        // console.log('splitCharReg:',splitCharReg)
        inputList.forEach((item) => {
          if (item) {
            let res = item.split(splitCharReg)
            resList = resList.concat(res)
          }
        })
      } else {
        splitCharReg = /\n/
        resList = inputValue.split(splitCharReg)
      }

      // console.log('splitCharReg:',splitCharReg)
      // console.log('resList2:',resList)
      // console.log('maKeys:',maKeys)
      // console.log('numKeys:',numKeys)
      // console.log('resList:',resList)
      // 先排序，再统计各个词出现的次数
      // 过滤掉非法的字符：小于1的数字，大于49的数字，非码的数字
      resList = resList.filter((item) => {
        if(maKeys.includes(item) || numKeys.includes(item)){
          return true
        }else {
          return false
        }
      })
      // console.log('resList1:',resList)
      
      // 对数据进行格式化，如果小于10，则数字前补0
      resList = resList.map((item) => {
        // 如果是数字
        if (/^\d+$/.test(item)) {
          return numToString(Number(item), 2)
        } else {
          return item
        }
      })
      console.log('resList:',resList)
      return resList
    },
    startCountNumMa (){
      // ['01', '49', '0尾', '单']
      let resList  = this.startSplit()
      if(!resList){
        return
      }
      // 将其他中文码转成数字码
      let numMaList = []
      resList.forEach((item) => {
        if(maKeys.includes(item)){
          numMaList = numMaList.concat(maMap[item].replace(/^,|,$/g,'').split(','))
        }else {
          numMaList.push(item)
        }
      })
      // 获取每个码重复的次数
      let resObj = {}
      numMaList.forEach((item) => {
        if (item) {
          if (resObj[item]) {
            resObj[item]++
          } else {
            resObj[item] = 1
          }
        }
      })
      // 获取出现0次的数字码有那些
      // 此时数字码数组 []
      let groupNumMaList = Object.keys(resObj)
      // console.log('groupNumMaList:',groupNumMaList)
      // 出现0次的数字码数组
      let nums0numList = []
      for (let i = 1; i <= 49; i++) {
        let num = numToString(i, 2)
        // console.log('num:',num,typeof num)
        // console.log('groupNumMaList.includes[num]:',groupNumMaList.includes[num）)
        if (!groupNumMaList.includes(num)) {
          nums0numList.push(num)
        }
      }
      // console.log('nums0numList:',nums0numList)
      // 归类后的结果
      let tempGroupResult = {}
      for (let key in resObj) {
        let num = resObj[key]
        if (tempGroupResult[num]) {
          tempGroupResult[num].push(key)
        } else {
          tempGroupResult[num] = [key]
        }
      }
      if(nums0numList.length > 0){
        tempGroupResult[0]= nums0numList
      }
      this.sortResult(tempGroupResult)
      // console.log('resObj:',resObj)
      // 将码-次数这种格式，转成次数-码的格式，同时获取出现0次的数据
    },

    sortResult(tempGroupResult) {
      let groupResultKeys = Object.keys(tempGroupResult)
      groupResultKeys.sort((a, b) => {
        if (this.sortType === 2) {
          return a - b
        } else {
          return b - a
        }
      })
      for (let key in tempGroupResult) {
        tempGroupResult[key].sort()
      }
      // console.log('groupResultKeys:',groupResultKeys)
      // let groupResultNew = {}
      let groupResult = []
      groupResultKeys.forEach((num) => {
        groupResult.push({
          num,
          valueList: tempGroupResult[num],
          valueStr: this.convertItemToString(tempGroupResult[num])
        })
        // groupResultNew[key] = tempGroupResult[key]
      })

      this.groupResult = groupResult
      ElMessage.closeAll()
      ElMessage({
        message: '处理成功',
        type: 'success'
      })
      this.setResultText()
    },
    downloadFile() {
      // 超出免费限制
      // 超出免费限制
      if (isReqOverflow()) {
        adminDialog.show()
        return
      }
      let str = '统计结果：\n'
      for (let item of this.groupResult) {
        str += `〖${item.num}次〗：${item.valueStr},（${item.valueList.length}个）\n`
      }
      let blob = new Blob([str], { type: 'text/plain;charset=utf-8' })
      downFile('统计结果_' + getShortTodayStr() + '.txt', blob)
    },
    downloadExcel() {
      // 超出免费限制
      // 超出免费限制
      if (isReqOverflow()) {
        adminDialog.show()
        return
      }
      let wb = XLSX.utils.book_new()
      // groupResult [{num:1,valueStr:'1',valueList:['1']}]
      let groupResult = this.groupResult
      let colNum = 0
      groupResult.forEach((item) => {
        if (item.valueList.length > colNum) {
          colNum = item.valueList.length
        }
      })
      let excelAoa = []
      let header = ['出现次数']
      for (let i = 1; i <= colNum; i++) {
        header.push('号码' + i)
      }
      excelAoa.push(header)
      groupResult.forEach((item) => {
        let row = [item.num]
        for (let i = 0; i < item.valueList.length; i++) {
          row.push(item.valueList[i])
        }
        for (let i = item.valueList.length; i < colNum; i++) {
          row.push('')
        }
        excelAoa.push(row)
      })
      let excelWorkSheet = XLSX.utils.aoa_to_sheet(excelAoa)
      XLSX.utils.book_append_sheet(wb, excelWorkSheet, '统计结果')
      let abuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' })
      let blob = new Blob([abuffer], { type: 'application/octet-stream' })
      downFile('统计结果_' + getShortTodayStr() + '.xlsx', blob)
    },
    downloadExcelBySortNum() {
      // 超出免费限制
      if (isReqOverflow()) {
        adminDialog.show()
        return
      }
      let wb = XLSX.utils.book_new()
      // groupResult [{num:1,valueStr:'1',valueList:['1']}]
      let groupResult = this.groupResult
      console.log('groupResult:',groupResult)
      let numAndTimes = {}
      groupResult.forEach((item) => {
        let valueList = item.valueList
        let times = item.num
        for (let i = 0; i < valueList.length; i++) {
          numAndTimes[valueList[i]] = times
        }
      })
      let excelAoa = []
      
      for(let i=1;i<=49;i++){
        let key = i
        if(key < 10){
          key = '0' + key
        }
        let rows = [String(key),numAndTimes[key]||0]
        excelAoa.push(rows)
      }
      let excelWorkSheet = XLSX.utils.aoa_to_sheet(excelAoa)
      XLSX.utils.book_append_sheet(wb, excelWorkSheet, '统计结果')
      let abuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' })
      let blob = new Blob([abuffer], { type: 'application/octet-stream' })
      downFile('统计结果(排序)_' + getShortTodayStr() + '.xlsx', blob)
    },
    
    copyText(str){
      
      
    },
    jumpToRule() {
      this.$router.push('/rules')
    },
    toggleInputBtnGroup() {
      this.inputBtnGroupVisible = !this.inputBtnGroupVisible
      localStorage.setItem(storageInputBtnGroupVisibleKey, this.inputBtnGroupVisible)
    }
  },
  setup(){
    const copyTextAreaRef = ref()
    function setResultText(){
      let str = '统计结果：\n'
      for (let item of this.groupResult) {
        str += `〖${item.num}次〗（${item.valueList.length}个）：${item.valueStr}\n`
      }
      // console.log('copyTextAreaRef.value:',copyTextAreaRef.value)
      copyTextAreaRef.value.value = str
    }
    function copyResultText(){
      copyTextAreaRef.value.select()
      document.execCommand('copy')
      ElMessage.closeAll()
      ElMessage({
        type:'success',
        message:'复制成功',
        duration:5000
      })
    }
    return {
      copyTextAreaRef,
      setResultText,
      copyResultText
    }
  },
  mounted() {
    let inputAreaWrap = document.getElementById('inputAreaWrap')
    window.addEventListener('scroll', function () {
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop
      let top = inputAreaWrap.getBoundingClientRect().top
      // console.log('scrollTop:', scrollTop)
      // console.log('top:', top)
      if (scrollTop >= 80) {
        inputAreaWrap.style.position = 'fixed'
        inputAreaWrap.style.top = '0'
        inputAreaWrap.style.width = 'calc(100% - 40px)'
      } else {
        inputAreaWrap.style.position = 'static'
        inputAreaWrap.style.width = '100%'
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.page {
  background-color: #eee;
  
}
.mf-area{
  position: absolute;
  top: -10000px;
  left: 0px;
  width: 100%;
  height: 0px;
  border: none;
  outline: none;
}
.tip {
  margin-top: 20px;
  text-align: right;
  font-size: 16px;
  line-height: 20px;
  color: blue;
  .tap {
    cursor: pointer;
  }
  .underline {
    text-decoration: underline;
  }
}
.cont {
  margin: auto;
  // max-width: 600px;
  border-radius: 0px !important;
  padding: 20px;
  box-sizing: border-box;
  overflow-x: hidden;
  border-top: 1px solid #eee;
  padding-bottom:200px!important;
  .input-box {
    height: 220px;
    .input-wrap {
      width: 100%;
      margin: auto;
      z-index: 1000;
      background-color: #fff;
    }
  }

  .input-wrap2 {
    // position: fixed;
    // top:60px;
  }
  .input-btn-group {
    margin-top: 8px;
    transition: all 0.3s;
    height: auto;
    overflow: hidden;
    &.height0 {
      height: 0;
    }
    .row {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      // margin-top: 10px;
      .label {
        margin-right: 10px;
        flex-shrink: 0;
        width: 200px;
        font-weight: bold;
        text-align: right;
      }
      .btn-wrap {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;

        .btn-item {
          margin-right: 10px;
          margin-bottom: 20px;
          font-weight: bold;
          .btn {
            font-weight: bold;
          }
        }
      }
    }
  }

  .split-char-wrap {
    display: flex;
    align-items: center;
    margin-top: 16px;
    justify-content: flex-end;
    .label {
      text-align: right;
      margin-right: 10px;
      // flex-shrink: 0;
      word-break: keep-all;
    }
    .value {
      width: 220px;
      min-width: 220px;
      flex-shrink: 0;
    }
  }

  .process-btn-group {
    margin-top: 20px;
    display: flex;
    justify-content: flex-start;
    align-items:center;
    flex-wrap: wrap;
    .marginleft2{
      margin-left:1px;
    }
    .btn{
      margin-bottom:10px;
    }
  }
  .result-wrap {
    // background-color: #f5f5f5;

    .title {
      margin-top: 32px;
      font-weight: bold;
      .link-btn {
        margin-left: 20px;
        margin-bottom: 20px;
        // text-decoration: underline;
        // cursor: pointer;
        // color: blue;
      }
    }
    .tools-wrap {
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
    .result-list-wrap {
      margin-top: 20px;
      background-color: #f5f5f5;
      padding: 20px 8px 40px;
      box-sizing: border-box;
      border-radius: 4px;
      .sub-title{
        font-weight: bold;
      }
    }
    .result-item {
      word-break: break-all;
      margin-top: 20px;
      display: flex;
      align-items: flex-start;
      .label {
        flex-shrink: 0;
        width: 140px;
        word-break: keep-all;
      }
      .res-value {
        margin-left: 10px;
        color: black;
        word-break: break-word;
      }
    }
  }
}
</style>
